export const tmplStr = `import React from "react";

/**
* 
* @param record 当前卡片数据
* @param config 配置了propName的属性配置
* @param actionProps 操作对象: defaultNode-默认渲染的操作节点，actions: 操作项配置数据，dispatch-操作点击调用
* dispatch(...action, data: record)
* @returns {JSX.Element}
* @constructor
*/
function CardContentTmpl({record = {}, config = CardContentTmpl.config, actionProps = {}} = {}) {
  const {defaultNode} = actionProps;
  const dataItems = config.dataItems.sort((cur, next) => cur.order - next.order);
  return (
    <div>
     {record[config.title.propName] != null && (
       <header>
         {record[config.title.propName]}
         {defaultNode}
       </header>
     )}
      <main>
        <div>
          {dataItems.map((item, index) => {
            return (
              <div key={item.id || index} >
                <label>{item.label}：</label>
                <span>{record[item.propName]}</span>
              </div>
            );
          })}
        </div>
       
      </main>
    </div>
  );
}

CardContentTmpl.tmplName = '默认模板';
CardContentTmpl.config = {
  title: {
    placeKey: 'title',
    placeText: '标题',
    label: '标题',
    propName: '',
  },
  dataItems: [
    { 
      placeText: '数据项',
      label: '数据项1',
      propName: '',
      order: 1,
    },
    {
      placeText: '数据项',
      label: '数据项2',
      propName: '',
      order: 2,
    },
  ],
}

export default CardContentTmpl`;
